<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐开放平台 - 闪耀，从这里开始</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="bg">
        <div class="bg1 bg-h"></div>
        <div class="bg2 bg-h"></div>
        <div class="bg3 bg-h"></div>
        <div class="bg4 bg-h"></div>
        <div class="bg5 bg-h"></div>
        <div class="bg6 bg-h"></div>
        <div class="bg7 bg-h"></div>
        <div class="bg8 bg-h"></div>
    </div>
    <div class="top-bg2"></div>
    <header>
        <div class="head-nav">
            <a href="../index.html" class="logo"><img src="../images/open/logo_0ba91e7.png" alt=""></a>
            <div class="right-login">
                <a href="#" class="gm">联系客服</a>
                <a href="#" class="help">帮助中心</a>
                <a href="#" class="login_btn">登录</a>
            </div>
        </div>
        <h2>QQ音乐开放平台</h2>
        <h1>闪耀 从这里开始</h1>
        <div class="top_btn_content">
            <a href="#" class="top_btn">立即入驻</a>
        </div>
        <nav class="nav">
            <a href="#" class="nav_item">专项流量</a>
            <a href="#" class="nav_item">粉丝互动</a>
            <a href="#" class="nav_item">数据助力</a>
            <a href="#" class="nav_item">作品管理</a>
            <a href="#" class="nav_item">创作变现</a>
        </nav>
    </header>
    <main>
        <!-- 1F -->
        <div class="main-content">
            <h2 class="main-content-title"><span>流量在手，推广不愁</span></h2>
            <p>在开放平台签到、评论、参与活动等均可赚取流量，
                <br>
                自主发起作品推广，你的作品你说了算
            </p>
            <div class="more">
                <a href="#">查看详情
                    <i></i>
                </a>
            </div>
            <img src="../images/open/pic11_2cf6d49.png" alt="" class="pic1">
            <img src="../images/open/pic12_064eb8b.png" alt="" class="pic2">
        </div>
        <!-- 2F -->
        <div class="main-content main-content2">
            <h2 class="main-content-title"><span>粉丝互动实时掌握</span></h2>
            <p>一键向粉丝发送私信，第一时间与粉丝分享最新音乐动态
            </p>
            <div class="more">
                <a href="#">查看详情
                    <i></i>
                </a>
            </div>
            <img src="../images/open/pic21_24491d5.png" alt="" class="pic1">
            <img src="../images/open/pic22_0f3a317.png" alt="" class="pic2">
        </div>
        <!-- 3F -->
        <div class="main-content main-content3">
            <h2 class="main-content-title"><span>数据助力，轻松上手</span></h2>
            <p>数据全面、透明化呈现，轻松上手助您以数据驱动创作
            </p>
            <div class="more">
                <a href="#">查看详情
                    <i></i>
                </a>
            </div>
            <img src="../images/open/pic11_2cf6d49.png" alt="" class="pic1">
            <img src="../images/open/pic12_064eb8b.png" alt="" class="pic2">
        </div>
        <!-- 4F -->
        <div class="main-content main-content4">
            <h2 class="main-content-title"><span>作品管理绿色通行</span></h2>
            <p>一站式作品发布、签约、管理，快捷发布歌曲、电台、
                <br>
                视频、专栏等更多音乐内容
            </p>
            <div class="more">
                <a href="#">查看详情
                    <i></i>
                </a>
            </div>
            <img src="../images/open/pic11_2cf6d49.png" alt="" class="pic1">
            <img src="../images/open/pic12_064eb8b.png" alt="" class="pic2">
        </div>
        <!-- 5F -->
        <div class="main-content main-content5">
            <h2 class="main-content-title"><span>创作变现真心实意</span></h2>
            <p>极具诚意的变现方案即将公布，保护创作者应有的权益，分成
                <br>
                方案诚意满满，帮助每一次音乐创作有效变现，敬请期待
            </p>
            <img src="../images/open/pic11_2cf6d49.png" alt="" class="pic1">
            <img src="../images/open/pic12_064eb8b.png" alt="" class="pic2">
        </div>
    </main>

    <!-- 登录窗口模块 -->
    <div class="login_window">
        <div class="login_content">
            <div class="login_top_nav">
                <ul>
                    <li>
                        <a href="javascript:;" class="qq_login green">QQ登录</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="wx_login">微信登录</a>
                    </li>
                </ul>
                <span class="iconfont login_close">&#xe600;</span>
            </div>
            <div class="qq_login_hide">
                <div class="login_middle">
                    <div class="login_left">
                        <h3>快速安全登录</h3>
                        <p>请使用<a href="javascript:;">QQ手机版</a>扫描二维码，</p>
                        <p>或点击头像授权登录。</p>
                        <div class="login_qrcode">
                            <i><img src="../images/icon/ptqrshow.png" alt=""></i>
                            <a href="javascript:;"><img src="../images/icon/g.jfif" alt="">
                                <span>L.</span>
                            </a>
                            <p><a href="javascript:;">帐号密码登录</a> | <a href="javascript:;">注册新帐号</a> | <a
                                    href="javascript:;">意见反馈</a></p>
                        </div>
                    </div>
                    <div class="login_right">
                        <p>
                            <a href="javascript:;">QQ音乐</a> 将获得以下权限：
                        </p>
                        <p><input type="checkbox" name="" id="">全选</p>
                        <p><input type="checkbox" name="" id="">获得您的昵称、头像、性别</p>
                        <span>授权后表明你已同意 <a href="javascript:;">QQ登录服务协议</a></span>
                    </div>
                </div>
                <div class="login_download">
                    <a href="javascript:;">下载客户端 体验更多内容</a>
                </div>
            </div>
            <div class="wx_login_hide">
                <div class="login_middle">
                    <img src="../images/icon/091jJGUp2wt80w3B.jfif" alt="">
                    <p><span>请使用微信扫描二维码登录"QQ音乐"</span></p>
                    <p>QQ与微信账号的音乐资产、付费特权不互通</p>
                </div>
                <div class="login_download">
                    <a href="javascript:;">下载客户端 体验更多内容</a>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/index.js"></script>
</body>

</html>